<!DOCTYPE html>
<html>
	<head>
		<title>Favicon Alerts Settings</title>
		<style>
td.pixel {
	width:10px;
	height:10px;
	cursor:pointer;
}
		</style>
		<script src="jquery.min.js"></script>
		<script src="settings.js"></script>
		<script src="drawing.js"></script>
		<script>
var form = {
	enabled:null,
	anchorV:null,
	anchorH:null,
	offsetX:null,
	offsetY:null,
	cutoff:null,
	olcolor:null,
	bgcolor:null,
	fgcolor:null
};
var curDomain = null;
var settings = null;
var enabledDomains = null;
var disabledDomains = null;
var canvas = [];
function initFields(domain) {
	try {
		settings = JSON.parse(localStorage[domain]);
	} catch(exception) { }
	if(!settings) return;
	
	updateEnabled();
	updateAnchor();
	updateOffset();
	updateCutoff();
	updateOlColor();
	updateBgColor();
	updateFgColor();
	updatePreview();
}
function saveSettings() {
	if(!curDomain || !settings) {
		return;
	}
	updatePreview();
	localStorage[curDomain] = JSON.stringify(settings);
	chrome.extension.sendRequest({updateDomain: curDomain}, function(){});
}
function updatePreview() {
	var cutoff = settings.cutoff - 2;
	if(cutoff < 1) cutoff = 1;
	canvas.forEach(function(c,i,a) {
		var ctx = c.getContext('2d');
		ctx.fillStyle = "#ddd";
		ctx.fillRect(0,0,16,16);
		drawUnread(c, String(cutoff++), settings);
	});
}
function updateEnabled() {
	form.enabled.innerText = settings.enabled? "Enabled" : "Disabled";
}
function updateAnchor() {
	form.anchorV.selectedIndex = settings.anchor.v;
	form.anchorH.selectedIndex = settings.anchor.h;
}
function updateOffset() {
	form.offsetX.value = settings.offset.x;
	form.offsetY.value = settings.offset.y;
}
function updateCutoff() {
	form.cutoff.value = settings.cutoff;
}
function updateOlColor() {
	form.olcolor.value = settings.olcolor;
}
function updateBgColor() {
	form.bgcolor.value = settings.bgcolor;
}
function updateFgColor() {
	form.fgcolor.value = settings.fgcolor;
}
function selectDomain(domain) {
	// TODO: implement?
}
var REG_NUMERIC = /^-?\d+$/;
var REG_PIXEL_ID = /([^_]+)_(\d+)_(\d+)_(\d+)/
function verifyNumeric(text) {
	if(text.value) {
		text = text.value;
	}
	return text.match(REG_NUMERIC);
}

function swapPixel(mapName,digit,x,y,method) {
	pix = $('#' + mapName + '_' + digit + '_' + x + '_' + y);
	if(pix.length > 0) {
		var val = pixelMaps[mapName][digit][y][x];
		if(method==1) {
			val += 0.05;
			if(val > 1) val = 1;
		} else if(method==2) {
			val -= 0.05;
			if(val < 0) val = 0;
		} else {
			val = (val>0)? 0 : 1;
		}
		pixelMaps[mapName][digit][y][x] = val;
		test = 'background-color:#' + rString(parseInt((1 - val) * 255).toString(16),3);
		pix[0].style.cssText = test;
		pix[0].title = (val == 0 || val == 1)? '' : val;
		updatePreview();
	}
}

function pixelClick(e) {
	var match = e.target.id.match(REG_PIXEL_ID);
	if(!match) {
		return;
	}
	var mapName = match[1];
	var digit = parseInt(match[2]);
	var x = parseInt(match[3]);
	var y = parseInt(match[4]);
	swapPixel(mapName, digit, x, y, e.which - 1);
	var s = '';
	for(n in e) {
		if(typeof(e[n])!="function")
			s += n + ' = ' + e[n] + '\n';
	}
	//alert(s);
	return false;
}

function insertPixelMapTables(mapName) {
	var outerTable = document.createElement('table');
	var tr = document.createElement('tr');
	tr.id = 'grid-' + mapName;
	outerTable.appendChild(tr);
	
	digits = pixelMaps[mapName];
	for(var i=0; i < digits.length; ++i) {
		var digit = digits[i];
		var td = document.createElement('td');
		var table = document.createElement('table');
		td.appendChild(table);
		table.rules = 'all';
		table.className = "grid";
		for(var y=0; y < digit.length; ++y) {
			pixels = digit[y];
			var row = document.createElement('tr');
			table.appendChild(row);
			for(var x=0; x < pixels.length; ++x) {
				var pix = document.createElement('td');
				pix.id = mapName + '_' + i + '_' + x + '_' + y;
				row.appendChild(pix);
				pix.className = 'pixel';
				var val = pixels[x];
				test = 'background-color:#' + rString(parseInt((1 - val) * 255).toString(16),3);
				pix.style.cssText = 'background-color:#' + rString(parseInt((1 - val) * 255).toString(16),3);
				pix.title = (val == 0 || val == 1)? '' : val;
				$(pix).bind('contextmenu',pixelClick);
				$(pix).bind('click', pixelClick);
			}
		}
		tr.appendChild(td);
	}
	document.body.appendChild(outerTable);
}
function rString(s,times) {
	var result = s;
	for(var i=times - 1; i > 0; i--) {
		result += s;
	}
	return result;
}
$(document).ready(function() {
	for(name in pixelMaps) {
		insertPixelMapTables(name);
	}
	form.enabled = document.getElementById('enabled');
	form.anchorV = document.getElementById('anchor.v');
	form.anchorH = document.getElementById('anchor.h');
	form.offsetX = document.getElementById('offset.x');
	form.offsetY = document.getElementById('offset.y');
	form.cutoff = document.getElementById('cutoff');
	form.olcolor = document.getElementById('olcolor');
	form.bgcolor = document.getElementById('bgcolor');
	form.fgcolor = document.getElementById('fgcolor');
	canvas.push(document.getElementById('canvas1'));
	canvas.push(document.getElementById('canvas2'));
	canvas.push(document.getElementById('canvas3'));
	canvas.push(document.getElementById('canvas4'));
	var sed = enabledDomains = document.getElementById('enableddomains');
	var sdd = disabledDomains = document.getElementById('disableddomains');
	var o = document.createElement('option');
	o.value = 'default';
	o.innerText = 'Default';
	sed.add(o);
	o.selected = true;
	for(var i=0; i < localStorage.length; ++i) {
		var key = localStorage.key(i);
		if(key == 'default') {
			continue;
		}
		var o = document.createElement('option');
		o.value = key;
		o.innerText = key;
		try {
			var opt = JSON.parse(localStorage[key]);
			if(opt.enabled) {
				sed.add(o);
			} else {
				sdd.add(o);
			}
		} catch(exception) { }
	}
	curDomain = 'default';
	initFields('default');
	$("#enableddomains").change(function() {sdd.selectedIndex = -1; curDomain = sed.options[sed.selectedIndex].value; initFields(curDomain);});
	$("#disableddomains").change(function(){sed.selectedIndex = -1; curDomain = sdd.options[sdd.selectedIndex].value; initFields(curDomain);});
	$("#enabled").click(function(){
		var opt = $('option[value=' + curDomain + ']')[0];
		opt.parentElement.remove(opt);
		settings.enabled = !settings.enabled;
		var sel = settings.enabled? enabledDomains : disabledDomains;
		saveSettings();
		sel.add(opt);
		updateEnabled();
	});
	$("#anchor\\.v").bind('change',function() {settings.anchor.v = form.anchorV.selectedIndex; saveSettings(); });
	$("#anchor\\.h").bind('change',function() {settings.anchor.h = form.anchorH.selectedIndex; saveSettings(); });
	$("#offset\\.x").bind('input',function() {
		if(verifyNumeric(form.offsetX)) {
			var x = parseInt(form.offsetX.value); if(x !== NaN) {settings.offset.x = x; saveSettings(); }
		}
	});
	$("#offset\\.y").bind('input',function() {
		if(verifyNumeric(form.offsetY)) {
			var y = parseInt(form.offsetY.value); if(y !== NaN) {settings.offset.y = y; saveSettings(); }
		}
	});
	$("#cutoff").bind('input',function() {
		if(verifyNumeric(form.cutoff)) {
			var c = parseInt(form.cutoff.value); if(c !== NaN) {settings.cutoff = c; saveSettings(); }
		}
	});
	$("#olcolor").bind('input',function() {settings.olcolor = form.olcolor.value; saveSettings(); });
	$("#bgcolor").bind('input',function() {settings.bgcolor = form.bgcolor.value; saveSettings(); });
	$("#fgcolor").bind('input',function() {settings.fgcolor = form.fgcolor.value; saveSettings(); });
});
		</script>
	</head>
	<body>
		<center><h1>EXPERIMENTAL Settings page</h1></center>
		<center>WARNING: This page is still experimental.  Use at your own risk.</center>
		<br />
		<select id="enableddomains" size="6"></select>
		<select id="disableddomains" size="6"></select>
		<br/><br/>
		<table><tbody>
		<tr>
			<td colspan="2"><a href="javascript:void" id="enabled">Enabled</a></td>
		</tr><tr>
			<td>Anchor Vertical:</td><td><select id="anchor.v"><option value="0">Top</option><option value="1">Center</option><option value="2">Bottom</option></select></td>
		</tr><tr>
			<td>Anchor Horizontal:</td><td><select id="anchor.h"><option value="0">Left</option><option value="1">Center</option><option value="2">Right</option></select></td>
		</tr><tr>
			<td>Vertical Offset:</td><td><input type="text" id="offset.y"></td>
		</tr><tr>
			<td>Horizontal Offset:</td><td><input type="text" id="offset.x"></td>
		</tr><tr>
			<td>First number to use smaller font:</td><td><input type="text" id="cutoff"></td>
		</tr><tr>
			<td>Border Color:</td><td><input type="text" id="olcolor"></td>
		</tr><tr>
			<td>Background Color:</td><td><input type="text" id="bgcolor"></td>
		</tr><tr>
			<td>Foreground Color:</td><td><input type="text" id="fgcolor"></td>
		</tr></tbody></table>
		<canvas style="border:1px;" id="canvas1" height="16" width="16"></canvas>
		&nbsp;<canvas style="border:1px;" id="canvas2" height="16" width="16"></canvas>
		&nbsp;<canvas style="border:1px;" id="canvas3" height="16" width="16"></canvas>
		&nbsp;<canvas style="border:1px;" id="canvas4" height="16" width="16"></canvas>
	</body>
</html>